<template>
    <div>
        <div v-show="editing">
            <admin-search
                    ref="search"
                    :type-select="false"
                    :show-type="false"
                    :type="type"
                    @blur="onBlur"
            @change="onSelected">

            </admin-search>
        </div>
        <div class="panel" @click="onEdit" v-show="!editing">
            <div class="show" >
                <div class="avatar">
                    <img :src="opts.avatar" />
                </div>
                <div class="text">
                    {{opts.name}}
                </div>
            </div>
            <div class="btn">
                <el-button type="text" size="mini" @click="onDetails">详情</el-button>
            </div>
        </div>

    </div>
</template>

<script lang="ts">

    import {Vue,Component,Prop,Watch} from 'vue-property-decorator'
    import AdminSearch from './AdminSearch'
    import {Api} from '@/api/meta'

    @Component({
        name:"AdminSearchEdit",
        components:{
            AdminSearch
        }
    })
    export default class AdminSearchEdit extends Vue{

        @Prop({
            required:true,
            type:Number
        })
        type;

        @Prop({
            required:false,
            type:String,
            default:'',
        })
        id;

        @Prop({
            required:false,
            type:String,
            default:'',
        })
        name;

        @Prop({
            required:false,
            type:String,
            default:''
        })
        avatar;

        @Prop({
            required:false,
            type:Boolean,
            default:true
        })
        editable;

        editing:boolean= false;
        opts: Api.Meta.SearchResponse_Record = {
            avatar:"",
            name:"",
            id:"",
        };

        onBlur() {
            console.log("blur")
        }


        searchType:number = 0;

        onSelected(user:Api.Meta.SearchResponse_Record) {
            if(user != null) {
                this.editing = false;
                this.opts = user;
                this.$emit('change',user)
            }
        }

        onBlur() {

            if(this.opts.id.length !== 0) {
                this.editing = false;
            }

        }


        onEdit() {

            if(this.editable) {
                this.editing = true;

                this.$nextTick(()=>{
                    let ref:any = this.$refs['search'];
                    ref.$el.click()
                });
            }


        }

        loadView() {

            this.searchType = this.type;

            if(this.opts.id.length === 0) {

                if(this.editable) {
                    this.editing = true
                }else{
                    this.editing = false;
                }

            }else{
                this.editing = false;
            }
        }

        onDetails() {

            if (this.searchType === 3) {
                this.$router.push({
                    path: `/stars/club/editor/${this.opts.id}`
                })
            }
            if(this.searchType === 2) {
                this.$router.push(`/stars/${this.opts.id}`)
            }

            if(this.searchType === 1){
                this.$router.push({
                    path:`/user/${this.opts.id}`
                })
            }
        }
        @Watch('id')
        onIDChange() {
            this.opts.avatar = this.avatar;
            this.opts.name = this.name;
            this.opts.id = this.id;
            this.loadView();
        }

        mounted() {
            this.opts.avatar = this.avatar;
            this.opts.name = this.name;
            this.opts.id = this.id;

            this.loadView()

        }
    }
</script>

<style lang="scss" scoped>

    .panel {
        width: 400px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        &:hover {
            cursor: pointer;
            border: 1px dashed #DCDFE6;
            height: 36px;

            .btn {
                visibility: visible;
            }
        }

        .btn {
            float: right;
            visibility: hidden;
            padding-right: 10px;
        }

        .show {
            display: flex;
            flex-direction: row;
            border: 1px solid transparent;
            height: 36px;


            .text {
                float: left;
                line-height: 36px;
            }

            .avatar {

                padding: 0px 5px 0px 5px;
                float: left;

                img {
                    position: relative;
                    display: inline-block;
                    width: 36px;
                    height: 36px;
                    /*圆形显示*/
                    border-radius: 50%;
                    /*圆形显示*/
                    background: rgba(255, 255, 255, 0.1);
                    vertical-align: center;
                }
            }

        }
    }

</style>